/**
 * 基于 Vue 实现的 分页插件
 * Created by Arvin on 2017/11/26.
 */
(function (Vue, $) {
    "use strict";
    if (typeof Vue === "undefined") {
        console.error('Vue 未定义！');
        return;
    }

    // 注册一个VUE组件
    var vueComponentName = 'pagination-component';
    Vue.component(vueComponentName, buildVueComponentOptions());

    /**
     * 构造 options
     */
    function buildVueComponentOptions() {
        // 模版内容
        var template = String.prototype.concat.call(
            '<div class="dataTables_paginate paging_simple_numbers pull-right" id="example1_paginate">',
            '<ul class="pagination">',
            '<li class="paginate_button previous" :class="prevClass()">',
            '<a href="javascript:void(0)" @click="firstPage()">First</a>',
            '<li class="paginate_button previous" :class="prevClass()">',
            '<a href="javascript:void(0)" @click="prevPage()">Previous</a>',
            '<li v-for="pageNo in pages" class="paginate_button" :class="activeClass(pageNo)">',
            '<a href="javascript:void(0)" @click="gotoPage(pageNo)">{{pageNo}}</a></li>',
            '<li class="paginate_button next" :class="nextClass()"><a href="javascript:void(0)" @click="nextPage()">Next</a></li>',
            '<li class="paginate_button next" :class="nextClass()"><a href="javascript:void(0)" @click="lastPage()">Last</a></li>',
            '</ul>',
            '</div>'
        );

        var options = {
            template: template,
            props: {
                model: Object
            },
            data: function () {
                var vm = this;
                return {
                    current: vm.model.current,
                    totalPage: 1
                }
            },
            created: function () {
                var vm = this;
                vm.current = vm.model.current;
                vm.totalPage = vm.model.count % vm.model.pageSize == 0 ? vm.model.count / vm.model.pageSize : vm.model.count / vm.model.pageSize + 1;
            },
            watch: {
                'current': function (newCurrent, oldCurrent) {
                    var vm = this;
                    //console.log('当前页发生变更： ' + oldCurrent + " --> " + newCurrent);
                    this.$emit('on-change', newCurrent);
                }
            },
            computed: {
                pages: function () {

                    var vm = this;
                    var pages = [];

                    var first = vm.current - 5;
                    first = first < 1 ? 1 : first;

                    var prevCount = first + 9 - vm.current;

                    var next = vm.current + prevCount;
                    next = next > vm.totalPage ? vm.totalPage : next;

                    for (var i = first; i <= next; ++i) {
                        pages.push(i);
                    }

                    return pages;
                }
            },
            methods: {
                activeClass: function (pageNo) {
                    var vm = this;
                    return {
                        'active': pageNo == vm.current
                    };
                },
                prevClass: function () {
                    var vm = this;
                    return {
                        'disabled': vm.current <= 1
                    };
                },
                nextClass: function () {
                    var vm = this;
                    return {
                        'disabled': vm.current >= vm.totalPage
                    };
                },
                nextPage: function () {
                    var vm = this;
                    var nextPage = vm.current < vm.totalPage ? vm.current + 1 : vm.current;
                    vm.current = nextPage;
                },
                lastPage: function () {
                    var vm = this;
                    var lastPage = vm.current < vm.totalPage ? vm.totalPage : vm.current;
                    vm.current = lastPage;
                },
                /**
                 * 跳转到某一页
                 * @param pageNo 要跳转的页码
                 */
                gotoPage: function (pageNo) {
                    var vm = this;
                    vm.current = pageNo;
                },
                /**
                 * 上一页
                 */
                prevPage: function () {
                    var vm = this;
                    var prevPage = vm.current > 1 ? vm.current - 1 : vm.current;
                    vm.current = prevPage;
                },
                /**
                 * 首页
                 */
                firstPage: function () {
                    var vm = this;
                    var firstPage = vm.current > 1 ? 1 : vm.current;
                    vm.current = firstPage;
                }
            }
        };

        return options;
    }

})(Vue, jQuery);
